<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import { getFieldEnumApi, getInfoApi } from '@/api/product'
import { CurdData } from '@/api/product/types'
import { Descriptions } from '@/components/Descriptions'
import useSchema from './components/hooks/useSchema'
import { AllSchemas, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { getCategoryListApi } from '@/api/category'
import { getCurrencyListApi } from '@/api/currency'
import { getBrandListApi } from '@/api/brand'

const { push, go } = useRouter()

const { query } = useRoute()

const { t } = useI18n()

const currentRow = ref<Nullable<CurdData>>(null)
const categoryList = ref([])
const brandList = ref([])
const currencyList = ref([])
const fieldEnum = ref([])

const getEnumInfo = async () => {
  const res = await getInfoApi(query.id as string)
  res.data.status = Number(res.data.status)
  currentRow.value = res.data
  const categoryRes = await getCategoryListApi({ name: 'Shanghai' })
  categoryList.value = categoryRes.data.list
  const currencyRes = await getCurrencyListApi({})
  currencyList.value = currencyRes.data.list
  const brandRes = await getBrandListApi({})
  brandList.value = brandRes.data.list
  const fieldRes = await getFieldEnumApi({ field: 'all' })
  fieldEnum.value = fieldRes.data
}

const allSchemas = ref<AllSchemas>({})
const fetchData = async () => {
  await getEnumInfo()

  // 在获取完所有数据后， 继续执行您希望在获取完数据后执行的代码
  // const { crudSchemas } = useSchema(
  //   void 0,
  //   [],
  //   [],
  //   void 0,
  //   void 0,
  //   categoryList,
  //   brandList,
  //   currencyList,
  //   fieldEnum
  // )
  const schemaConfig: any = {
    categoryList,
    brandList,
    currencyList,
    fieldEnum
  }
  const { crudSchemas } = useSchema(schemaConfig)
  const { allSchemas: newSchemas } = useCrudSchemas(crudSchemas)
  allSchemas.value = newSchemas
}
fetchData()
</script>

<template>
  <ContentDetailWrap :title="t('product.detail')" @back="push('/product/product-management')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <Descriptions :schema="allSchemas.detailSchema" :data="currentRow || {}" />

    <!--   关联商品列表-->
    <el-table
      class="m-t-60px"
      v-if="currentRow?.product_accessories_linked_data.length"
      :data="currentRow.product_accessories_linked_data"
      highlight-current-row
      stripe
      border
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column :label="t('attachment.id')" prop="id" width="150" />
      <el-table-column :label="t('attachment.code')" prop="code" />
      <el-table-column :label="t('attachment.name')" prop="cname" />
      <el-table-column :label="t('attachment.status')" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <ElTag v-if="row.status == 1" type="success">上架</ElTag>
          <ElTag v-else type="warning">下架</ElTag>
        </template>
      </el-table-column>
    </el-table>
  </ContentDetailWrap>
</template>

<style lang="less">
@import url('@/styles/global.less');
</style>
